<template>
    <div class="warp">
        <div class="title-warp">
            <div class="title">控制面板</div>
            <div class="con-warp">
                <i class="el-icon-circle-plus" @click="handleAdd"></i>
                <span>{{ temperature }} ℃</span>
                <i class="el-icon-remove" @click="handleReduce"></i>
            </div>
        </div>
        <div class="controls-warp">
            <div class="title">开关机</div>
            <tabs :data="onOffData" @changeTabs="handleOnOff" :idx="1"></tabs>
            <div class="title">模式</div>
            <tabs :data="modeData" @changeTabs="handleOnOff" :idx="1"></tabs>
            <div class="title">风速</div>
            <tabs
                :data="windSpeedData"
                @changeTabs="handleOnOff"
                :idx="1"
            ></tabs>
            <div class="title">屏蔽</div>
            <el-checkbox-group v-model="checkList">
                <el-checkbox label="温度屏蔽"></el-checkbox>
                <el-checkbox label="开关屏蔽"></el-checkbox>
                <el-checkbox label="模式屏蔽"></el-checkbox>
            </el-checkbox-group>
            <div class="title">节能设定</div>
            <tabs :data="energyData" @changeTabs="handleOnOff" :idx="1"></tabs>
        </div>
        <div class="btn-warp">
            <el-button type="primary" size="mini"> 确定</el-button>
            <el-button size="mini" @click="$emit('handleClose', index)"
                >关闭</el-button
            >
        </div>
    </div>
</template>
<script>
import tabs from "./tabs.vue";
export default {
    props: {
        index: {
            type: Number,
            default: 0,
        },
    },
    components: { tabs },
    name: "controlsPov",
    data() {
        return {
            onOffData: [
                {
                    name: "关机",
                    idx: 0,
                    url: require("@/assets/scene/powerOff.png"),
                },
                {
                    name: "开机",
                    idx: 1,
                    url: require("@/assets/scene/powerOn.png"),
                },
            ],
            modeData: [
                {
                    name: "制冷",
                    idx: 0,
                    url: require("@/assets/scene/snowflake.png"),
                },
                {
                    name: "除湿",
                    idx: 1,
                    url: require("@/assets/scene/arefaction.png"),
                },
                {
                    name: "送风",
                    idx: 2,
                    url: require("@/assets/scene/blowing.png"),
                },
                {
                    name: "制热",
                    idx: 3,
                    url: require("@/assets/scene/heating.png"),
                },
                {
                    name: "自动",
                    idx: 4,
                    url: require("@/assets/scene/Auto.png"),
                },
            ],
            windSpeedData: [
                {
                    name: "无效",
                    idx: 0,
                    url: require("@/assets/scene/RedHorn.png"),
                },
                {
                    name: "自动",
                    idx: 1,
                    url: require("@/assets/scene/RedHorn.png"),
                },
                {
                    name: "抵挡",
                    idx: 2,
                    url: require("@/assets/scene/RedHorn.png"),
                },
                {
                    name: "中低档",
                    idx: 3,
                    url: require("@/assets/scene/RedHorn.png"),
                },
                {
                    name: "中档",
                    idx: 4,
                    url: require("@/assets/scene/RedHorn.png"),
                },
                {
                    name: "中高档",
                    idx: 5,
                    url: require("@/assets/scene/RedHorn.png"),
                },
                {
                    name: "高档",
                    idx: 6,
                    url: require("@/assets/scene/RedHorn.png"),
                },
                {
                    name: "强劲风",
                    idx: 7,
                    url: require("@/assets/scene/RedHorn.png"),
                },
            ],
            energyData: [
                {
                    name: "关闭",
                    idx: 0,
                    url: require("@/assets/scene/RedHorn.png"),
                },
                {
                    name: "开启",
                    idx: 1,
                    url: require("@/assets/scene/RedHorn.png"),
                },
            ],
            checkList: [],
            idx: 1,
            temperature: 22,
        };
    },
    created() {},
    mounted() {},
    methods: {
        handleOnOff(e) {
            console.log(e);
        },
        handleAdd() {
            if (this.temperature >= 30) {
                this.$message({
                    message: "最高温度只能设置为30度",
                    type: "error",
                });
            } else {
                this.temperature++;
            }
        },
        handleReduce() {
            if (this.temperature <= 16) {
                this.$message({
                    message: "最低温度只能设置为16度",
                    type: "error",
                });
            } else {
                this.temperature--;
            }
        },
    },
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.warp {
    // height: 500px;
    // width: 300px;
    .title-warp {
        background-image: url("../../../assets/img/indexbg.jpg") !important;
        background-size: cover; /* 背景图片覆盖整个元素 */
        // background-size: 100% 100%;
        background-position: center; /* 背景图片居中 */
        background-repeat: no-repeat; /* 背景图片不重复 */
        width: 380px;
        height: 70px;
        padding: 10px;
        color: #fff;
        .title {
            font-size: 12px;
        }
        .con-warp {
            // padding: 0 30px;
            margin-top: 5px;
            text-align: center;
            :nth-child(1) {
                color: #409ac5;
                font-size: 26px;
                cursor: pointer;
            }
            :nth-child(2) {
                margin: 0 10px;
                font-size: 26px;
            }
            :nth-child(3) {
                color: #409ac5;
                font-size: 26px;
                cursor: pointer;
            }
        }
    }
    .controls-warp {
        // height: 200px;
        padding: 0px 20px;
        .title {
            color: #4b7dad;
            font-size: 16px;
            margin: 10px 0;
        }
    }
    .btn-warp {
        text-align: right;
        margin: 15px 15px 15px 0;
    }
}
</style>
